<template>
  <el-card>
    <!-- 命名插槽 -->
    <template #header>
      <h3 class="users-title">用户管理</h3>
    </template>
    <!-- 默认插槽 -->
    <el-button type="primary" @click="$router.history.push('/user/add')">
      添加
    </el-button>
    <el-button type="danger">批量删除</el-button>
    <!-- 
      data 要渲染的数据
      selection-change 事件，当选择checkbox时触发
      border 带边框
     -->
    <el-table
      :data="users"
      @selection-change="handleSelectionChange"
      border
      class="users-table"
    >
      <el-table-column type="selection" width="55" align="center">
      </el-table-column>
      <el-table-column width="55" label="序号" type="index" align="center">
      </el-table-column>
      <el-table-column label="用户名" prop="username"></el-table-column>
      <el-table-column label="用户昵称" prop="nickname"> </el-table-column>
      <el-table-column label="操作">
        <el-tooltip content="更新" placement="top">
          <el-button icon="el-icon-edit" size="mini" type="warning"></el-button>
        </el-tooltip>
        <el-tooltip content="删除" placement="top">
          <el-button
            icon="el-icon-delete"
            size="mini"
            type="danger"
          ></el-button>
        </el-tooltip>
      </el-table-column>
    </el-table>

    <!-- 
      current-change 当页码发生变化时触发
      size-change 当每页条数发生变化时触发
      current-page 当前页码
      page-size 每页条数
      page-sizes 每页条数可选项
      layout 当前要加载组件
      total 总数
     -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page"
      :page-sizes="[3, 6, 9, 12]"
      :page-size="limit"
      layout="prev, pager, next, jumper, total, sizes"
      :total="total"
    >
    </el-pagination>
  </el-card>
</template>

<script>
import { mapState, mapActions } from "vuex";

export default {
  name: "Users",
  mounted() {
    this.getUsersList({
      page: this.page,
      limit: this.limit,
    });
  },
  data() {
    return {
      page: 1,
      limit: 3,
    };
  },
  computed: {
    ...mapState("users", ["users", "total"]),
    ...mapState("test", ["name"]),
  },
  methods: {
    ...mapActions("users", ["getUsersList"]),
    handleSelectionChange(val) {
      console.log(val);
    },
    // 当每页条数发生变化
    handleSizeChange(limit) {
      this.limit = limit;
      this.getUsersList({
        page: this.page,
        limit,
      });
    },
    handleCurrentChange(page) {
      this.page = page;
      this.getUsersList({
        page,
        limit: this.limit,
      });
    },
  },
};
</script>

<style>
.users-title {
  margin: 0;
}
.users-table {
  margin: 10px 0;
}
.el-pagination__sizes,
.el-pagination__total {
  float: right;
}
</style>